<template>
  <div class="myHeader-container">

    <!--  侧边栏收缩按钮  -->
    <div class="btn-box">
      <div @click="changeCollapsed" class="btn">
        <Icon :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
      </div>
    </div>

    <div class="box">
      <div class="time tvc">
        {{ time }}
      </div>

      <div class="name">
        {{ userName }}
      </div>

      <div class="head">
        <Badge :count="tipCount" overflow-count="99" :offset="[16,3]">
          <Dropdown trigger="click" style="margin-left: 20px" @on-click="choose">
            <a href="javascript:void(0)">
              <Avatar icon="ios-person" size="40" :src="headPortraitUrl"/>
            </a>

            <DropdownMenu slot="list">
              <DropdownItem name="personal">个人信息</DropdownItem>
              <DropdownItem name="tip">信息提示</DropdownItem>
              <DropdownItem name="exit" divided>退出</DropdownItem>
            </DropdownMenu>
          </Dropdown>

        </Badge>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "MyHeader",
  props: ['collapseFlag'],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      time: "",
      clock: null,
      //提示
      tipCount: 1,
      //头像
      headPortraitUrl: ""
    }
  },
  //计算属性
  computed: {
    rotateIcon() {
      return ['menu-icon', this.collapseFlag ? 'rotate-icon' : ''];
    },
    userName() {
      let userName = this.$store.getters.getUserInfo.userName;
      let userNickName = this.$store.getters.getUserInfo.userNickName;
      let name = userNickName.trim()==""?userName:userNickName;
      return name;
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    //切换
    changeCollapsed() {
      this.bus.$emit("my-event-change-collapsed", true);
    },
    //处理数据 时间不足10的显示 6 =>06
    calcValue(value) {
      value = value < 10 ? "0" + value : value;
      return value;
    },
    //选择【个人信息】【退出】
    choose(name){
      if(name=='exit'){
        this.exit()
      }
    },
    exit(name) {
      window.localStorage.clear();  //清空 localStorage
      window.sessionStorage.clear(); //清空 sessionStorage
      this.$store.commit("setIsLogin",false)     //清空 vuex

      // this.$router.push("/")      //跳转登录页
      // window.location.replace("/")
    }
  },
  //钩子函数
  created() {
    this.clock = setInterval(() => {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      let flag = hours >= 12;
      if(flag){
        hours -= 12
      }
      //${year} ${this.calcValue(month + 1)} ${this.calcValue(day)}
      this.time = `${flag ? '下午' : '上午'} ${this.calcValue(hours)} : ${this.calcValue(minutes)} : ${this.calcValue(seconds)}`;
    }, 1000)
  },
  destroyed() {
    this.clock = null;
  }
}
</script>

<style lang="less" scoped>
.myHeader-container {
  width: 100%;
  height: 100%;
  display: flex;

  .btn-box {
    width: 60px;

    .btn {
      border-radius: 4px;
    }
  }

  .box {
    height: 68px;
    flex-grow: 1;
    align-self: stretch;
    background-color: #EEE;
    display: flex;
    justify-content: flex-end;

    .time {
      padding: 0px 20px 0px 20px;
      height: 54px;
      line-height: 54px;
      //background-color: #DEDEDE;
      margin: 7px 20px 0px 0px;
      font-size: 16px;
      border-radius: 6px;
      color: #000;
    }

    .head {
      margin-right: 40px;
    }

    .name {
      margin-right: 0px;
      font-size: 20px;
      color: #000;
    }
  }
}

.menu-icon {
  transition: all .8s;
}

.rotate-icon {
  transform: rotate(-90deg);
}
</style>